<template>
  <div>
    <div v-for="(item, index) in tplData" :key="index">
      <diy-audio v-if="item.type ==15" :tplItemData="item.content"></diy-audio>
      <blank v-else-if="item.type ==11" :tplItemData="item.content"></blank>
      <bulletin v-else-if="item.type ==16" :tplItemData="item.content" ></bulletin>
      <card-list v-else-if="item.type ==21" :tplItemData="item.content"></card-list>
      <community v-else-if="item.type ==29" :tplItemData="item.content"></community>
      <cut-line v-else-if="item.type ==10" :tplItemData="item.content"></cut-line>
      <diy-module v-else-if="item.type ==3" :tplItemData="item.content"></diy-module>
      <editor v-else-if="item.type ==1" :tplItemData="item.content"></editor>
      <goods v-else-if="item.type ==4" :tplItemData="item.content" :tplAllData="item" :cityType="cityType"></goods>
      <goods-cate v-else-if="item.type ==17" :tplItemData="item.content"></goods-cate>
      <goods-list v-else-if="item.type ==5" :tplItemData="item.content"></goods-list>
      <goods-sales v-else-if="item.type ==20 && JSON.stringify(item.content) != '{}'" :tplItemData="item.content"></goods-sales>
      <goods-search v-else-if="item.type ==6" :tplItemData="item.content"></goods-search>
      <img-adv v-else-if="item.type ==9" :tplItemData="item.content"></img-adv>
      <img-nav v-else-if="item.type ==8" :tplItemData="item.content"></img-nav>
      <min-type v-else-if="item.type ==18" :tplItemData="item.content"></min-type>
      <!-- <page-set v-else-if="item.type ==11" :tplItemData="item.content"></page-set> -->
      <pd-living v-else-if="item.type ==30" :tplItemData="item.content"></pd-living>
      <wx-living v-else-if="item.type ==33" :tplItemData="item.content"></wx-living>
      <point-exchange v-else-if="item.type ==27" :tplItemData="item.content"></point-exchange>
      <pre-sell v-else-if="item.type ==31" :tplItemData="item.content"></pre-sell>
      <reco-goods v-else-if="item.type ==19" :tplItemData="item.content"></reco-goods>
      <sec-kill v-else-if="item.type ==28" :tplItemData="item.content"></sec-kill>
      <showcase v-else-if="item.type ==13" :tplItemData="item.content"></showcase>
      <slide-nav v-else-if="item.type ==22" :tplItemData="item.content"></slide-nav>
      <slide-top-nav v-else-if="item.type ==23" :tplItemData="item.content"></slide-top-nav>
      <store  v-else-if="item.type ==25" :tplItemData="item.content"></store>
      <text-nav v-else-if="item.type ==7" :tplItemData="item.content"></text-nav>
      <title-tpl v-else-if="item.type ==2" :tplItemData="item.content"></title-tpl>
      <top-menu v-else-if="item.type ==12" :tplItemData="item.content"></top-menu>
      <diy-video v-else-if="item.type ==14" :tplItemData="item.content" :vid="item.id"></diy-video>
      <live-list v-else-if="item.type ==44" :tplItemData="item.content" :type="item.type"></live-list>
      <!-- <city-mian v-else-if="item.type ==26" :tplItemData="item.content"></city-mian> -->
      <!-- 商品分组组件 -->
      <item-group v-else-if="item.type =='GoodsGroup'" :tplItemData="item.content" :itemPic="itemPic"></item-group>

      <!-- 分销专题导航组件 -->
      <magazine-lists-top-nav v-else-if="item.type =='34'" :tplItemData="item.content"></magazine-lists-top-nav>

    </div>
  </div>
</template>

<script>
import diyAudio from './decoration/audio'
import blank from './decoration/blank'
import bulletin from './decoration/bulletin'
import cardList from './decoration/cardList'
import community from './decoration/community'
import cutLine from './decoration/cutLine'
import diyModule from './decoration/diyModule'
import editor from './decoration/editor'
import goods from './decoration/goods'
import goodsCate from './decoration/goodsCate'
import goodsList from './decoration/goodsList'
import goodsSales from './decoration/goodsSales'
import goodsSearch from './decoration/goodsSearch'
import imgAdv from './decoration/imgAdv'
import imgNav from './decoration/imgNav'
import minType from './decoration/minType'
// import pageSet from './decoration/pageSet'
import pdLiving from './decoration/pdLiving'
import wxLiving from './decoration/wxLiving'
import pointExchange from './decoration/pointExchange'
import preSell from './decoration/preSell'
import recoGoods from './decoration/recoGoods'
import secKill from './decoration/secKill'
import showcase from './decoration/showcase'
import slideNav from './decoration/slideNav'
import slideTopNav from './decoration/slideTopNav'
import store from './decoration/store'
import textNav from './decoration/textNav'
import titleTpl from './decoration/title'
import topMenu from './decoration/topMenu'
import diyVideo from './decoration/video'
import liveList from './decoration/liveList'
// import cityMian from './decoration/cityMain'
import itemGroup from './decoration/itemGroup'
import magazineListsTopNav from './decoration/magazineListsTopNav'

import Vue from 'vue'

export default Vue.extend({
  props: {
    tplData: {
      type: Array,
      default() {
        return []
      }
    },
    itemPic: {
      tpye: String
    },
    cityType: {
      tpye: String,
      default: ''
    }
  },
  components: {
    diyAudio,
    blank,
    bulletin,
    cardList,
    community,
    cutLine,
    diyModule,
    editor,
    goods,
    goodsCate,
    goodsList,
    goodsSales,
    goodsSearch,
    imgAdv,
    imgNav,
    minType,
    // pageSet,
    pdLiving,
    wxLiving,
    pointExchange,
    preSell,
    recoGoods,
    secKill,
    showcase,
    slideNav,
    slideTopNav,
    store,
    textNav,
    titleTpl,
    topMenu,
    diyVideo,
    // cityMian
    itemGroup,
    magazineListsTopNav,
    liveList
  },
  watch: {
    tplData() {
      this.ProcessingLoading();
    }
  },
  created() {
    // console.log(this.tplData, '实际装修数据')
  },
  mounted() {
    this.ProcessingLoading();
  },
  methods: {
    // TODO 商品分组触底加载
    onLoad() {
      if (this.$refs.itemGroup) {
        this.$refs.itemGroup.onLoad()
      }
    },
    // 处理首页加载数据
    ProcessingLoading() {
      let decorationInfo = this.tplData
      // console.log('ProcessingLoading.....')
      let videoSort = 0;
      for (let i = 0; i < decorationInfo.length; i++) {
        if (decorationInfo[i].type == 14) {
          if (typeof isPlayArr === "undefined") {
            var isPlayArr = [];
          }
          isPlayArr[videoSort] = false;
          decorationInfo[i].content.videoSort = videoSort;
          videoSort++;
          decorationInfo[i].content.isPlayArr = isPlayArr;
          // console.log('ProcessingLoading.....decorationInfo', decorationInfo[i])

        }
      }
      this.tplData = decorationInfo
    }
  }
})
</script>

<style>

</style>